<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单设计</title>
    <#include "/pubHeadStyle.html">
    <link rel="stylesheet" href="${ctx}/formStatic/style/forms/formDevise.css" media="all">
    <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
    <script type="text/javascript">
        var multipartMaxSize = '${multipartMaxSize}';
    </script>

</head>
<body>
<div class="form-header">
    <div class="form-top-name"></div>
    <div class="form-top-opt" style="margin-right:30px;">
        <a class="saveForm layui-btn layui-btn-sm">保存</a>
    </div>
    <!--<div class="form-top-opt" style="margin-right:110px;">-->
        <!--<a class="queryHi layui-btn layui-btn-sm">查看历史记录</a>-->
    <!--</div>-->
    <div class="layui-tab layui-tab-brief" lay-filter="tabsTem">
        <ul class="layui-tab-title">
            <li class="layui-this">布局</li>
            <li>组件</li>
          </ul>
          <div class="layui-tab-content">
            <ul class="dragSourceTop formTopTem">
            
            </ul>
          </div>
      </div>
</div>  

<div class="tableEventCont">

  <a class="firstInsRow">前插入行</a>
  <a class="afterInsRow">后插入行</a>
  <a class="deleteRow">删除当前行</a>
  <hr />
  <a class="firstInsCol">前插入列</a>
  <a class="afterInsCol">后插入列</a>
  <a class="deleteCol">删除当前列</a>
  <hr />
  <a class="cellMerge">合并单元格</a>
  <a class="cellSplit">拆分单元格</a>
  <hr />
    <!-- <a class="tableQuery">表格属性</a> -->
  <!-- <a class="rowQuery">行属性</a> -->
  <a class="cellQuery">单元格属性</a>
</div>
    
<div class="form-info">
  <div class="defLeftTem">

  </div>

  <div class="layui-form dragDiv" id="dragDiv">


    
    

  </div>
  <div class="form-props">
    <div class="form-props-info">
        <div class="form-none">暂无选中组件属性</div>
    </div>
    <div class="form-props-opt">
        <div class="form-props-attr" state="0">属性</div>
    </div>
  </div>
</div>
<script src="${ctx}/extends/jquery.min.js"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js"></script>
  
<script>

    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'setter','ice','dragLay','form','element','layer','totalFilter','slider','colorpicker','propsHandle','tableExcel','upload','tree','table'], function () {

        //  下列配置项 注释表明  /*****/
    // -----常量声明----------
    var dragLay = layui.dragLay, // 拖拽插件
    $ = layui.$,  // jquery
    setter = layui.setter,  // 配置信息
    form = layui.form,    // 表单控件
    ice = layui.ice,    // 预读及连贯文件纽带
    layer = layui.layer,  // 弹窗控件
    propsHandle = layui.propsHandle,  // 初始化部分
    element = layui.element,  // 节点初始化 控件  （仅限 控制 layui内部元素 init）
    formId = '${formDefId}' || '',   //  表单id *****
    defProps = {
      // viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
      viewMould: 'moulds/', // 组件模块 存放文件 *****
      // 模块组件样式
      initCss:[
        // 'style/forms/formDevise',
        'style/forms/dragLay',
        'style/forms/grid/grid1',
        'style/forms/grid/grid2',
        'style/forms/grid/grid3',
        'style/forms/template/tag',
        'style/forms/template/text',
        'style/forms/template/table',
        'style/forms/template/textArea',
        'style/forms/template/radioOption',
        // 'style/forms/template/number',
        'style/forms/template/date',
        'style/forms/template/uploadFile',
        'style/forms/template/richText',
        'style/forms/template/select',
        'style/forms/template/checkOption',
        'style/forms/template/dataLexi',
        'style/forms/template/uploadImg',
        'style/forms/template/selector',
        'style/forms/template/hideField',
        'style/forms/template/button'
      ],
      // 模块分类  末位为模块组索引
      initTopTemList0: [
        'grid/grid1',
        'grid/grid2',
        'grid/grid3',
        'template/table',
        'template/tag',
        'template/button'
      ],
      // 模块分类
      initTopTemList1: [
        'template/text',
        'template/textArea',
        // 'template/number',
        'template/date',
        'template/uploadFile',
        'template/uploadImg',
        'template/richText',
        'template/select',
        'template/radioOption',
        'template/checkOption',
        'template/dataLexi',
        'template/selector',
        'template/hideField'
      ],
      // viewCss:'style/forms/',
      formPropsInfo:'.form-props-info',
      formAreaInfo:'.dragDiv',
      loadReq:'request',
      formPropsAttr:'.form-props-attr',
      formProps:'.form-props',
      formCont:'.form-info',
      suffix:'',
      dragTopName:'.formTopTem',
      dragLeftName:'.defLeftTem',
      temSpace: '.temSpace',
      selectStamp:'selectStamp',
      temDate:'.temDate',
      uploadFileBtn:'.uploadFileBtn',
      uploadImgBtn:'.uploadImgBtn',
      richTextArea:'.richTextArea',
      selectInput:'.selectInput',
      radioOptionCont:'.radioOptionCont',
      dataLexiTree:'.dataLexiTree',
      selectorBtn:'.selectorBtn',
    },
    temQuery = new propsHandle()  // 实例化模板功能部分
    ;



  // --- 通用方法 -----
    // 右侧属性load
    function propsLoad(name){
      $(defProps.formPropsInfo).load(setter.views+defProps.viewMould+$(name).attr(defProps.loadReq)+'/props'+defProps.suffix)
    }

    // 延迟执行拆解
    function timeoutLoad(name,i,item){
      $(name+' > li').eq(i).load(setter.views+defProps.viewMould+item+'/index'+defProps.suffix,function(){
          $(name+' > li').eq(i).find(defProps.temSpace).parent().attr(defProps.loadReq,item);
      });
    }
    
    // 顶部数据加载
    function sourceLoad(name,list){
      $(name).html('');
      for(var i=0;i<list.length;i++){
        $(name).append('<li></li>');
        timeoutLoad(name,i,list[i])
      }
    }




// ------start---------


    // init 模板部分渲染
    ice.loadCss(defProps.initCss);
    sourceLoad(defProps.dragTopName,defProps.initTopTemList0);
    // 顶部事件切换
    element.on('tab(tabsTem)', function(data){
      sourceLoad(defProps.dragTopName,defProps['initTopTemList'+data.index]);
      dragCase.init();
    });



      // 左侧

      if(!!formId){
          $(defProps.dragLeftName).load(serverPath.formPath + setter.formLinkPath +'formDef/view/formDesign/formLeftTem?formDefId='+formId + defProps.suffix);
      }


    // 拖拽部分功能init实例
    window.dragCase = new dragLay({
      dragId : 'dragDiv',
      dragMoveBtn : 'dragMoveBtn',
      dragInfo : 'dragInfo',
      dragRemove : 'dragRemove',
      dragSourceTop : 'dragSourceTop',
      dragSourceLeft : 'dragSourceLeft',
      placeX : !!formId? 100 : 0,
      placeY : 70,
      extend:{
        tableExcel:function(){
          new tableExcel({
            extend: {
              firstInsRow : function(){
                setTimeout(function(){
                  dragCase.init();
                },0)
              },
              cellQuery:function(objs){
                objs.click();
              },
              cellSplit:function(){
                $(defProps.formPropsInfo).html('');
                $(defProps.formPropsInfo).attr(defProps.loadReq,'');
                $(defProps.formPropsInfo).attr('state','1');
                $(defProps.formPropsAttr).click();
              }
            }
          })
        },
        extdndInit:function(){
          // 扩展类init 部分
          //   初始化组件事件
            temQuery.initTemEvent(defProps,serverPath,setter);

            form.render();


        }
      } 
    });






    // // 默认加载右侧及展开关闭
    $(defProps.formPropsAttr).click(function(){
      var req = $(defProps.formPropsInfo).attr(defProps.loadReq);
      if($(defProps.formPropsInfo).attr('state') === '1'){
          $(defProps.formPropsInfo).html('<div class="form-none">暂无选中组件属性</div>');
      }else if(req){
        propsLoad(defProps.formPropsInfo);
      }
      return false;
    });



    

    // 处理组件选中事件
    $(document).on('mouseup',defProps.temSpace,function(e){
      $(defProps.formPropsInfo).attr(defProps.loadReq,$(this).parent().attr(defProps.loadReq));
      $(defProps.formPropsInfo).attr('state','0');
      $(defProps.temSpace).removeClass(defProps.selectStamp);
      $(this).addClass(defProps.selectStamp);
      $(defProps.formPropsAttr).click();
      return false;
    });




    // 处理组件删除事件
    $(document).on('click','.dragRemove',function(){
      $(defProps.formPropsInfo).html('');
      $(defProps.formPropsInfo).attr(defProps.loadReq,'');
      $(defProps.formPropsInfo).attr('state','1');
      $(defProps.formPropsAttr).click();
    });


    // table 扩展部分excel功能

    $(defProps.formCont).css('left' ,!!formId ? '100px' : '0px' );
    $(defProps.dragLeftName).css('display',!!formId ? 'block' : 'none' );

 
    
    // 初始化模板功能
    temQuery.initTem({
      selectorBtn:defProps.selectorBtn,
      selectorTemPath:setter.views+defProps.viewMould
    });

    // 保存
    $('.saveForm').click(function(){
      $(defProps.formAreaInfo+' [isinit="1"]').each(function(i,item){
        $(item).attr('isinit','2');
      });
       //保存之前校验是否有密级字段
        var dataPrivacyObj = $("select[name^='m:'][name$='dataPrivacyLevel']");
        var dataPrivacyObjLength = dataPrivacyObj.length;
        if(dataPrivacyObjLength == 1){
            layer.alert("请添加密级字段到表单中！");
            return false;
        }
       $.ajax({
          url:serverPath.formPath + setter.formLinkPath +'formDef/saveFormHtml',
          type: "POST",
          data:{
            formDefId:formId,
            html:encodeURIComponent(encodeURI($('#dragDiv').html()))
          },
          dataType:'json',
          success: function(result) {
            $(defProps.formAreaInfo + '  [isinit="2"]').each(function(i,item){
              $(item).attr('isinit','1');
            });
            var resultMsg = result.msg+'是否继续编辑？';
              layer.alert(resultMsg, {icon:1,title:'操作',
                  btn: ['确定', '取消'] //可以无限个按钮
                  ,btn2: function(index, layero){
                    //按钮【取消】的回调
                      window.close();
                  }
              },function(index, layero){
                  //按钮【确定】的回调
                  layer.close(index);
              });
          }
       })
    });


        // 查看历史记录
        $('.queryHi').click(function () {
            layer.open({
                type: 2,
                area: ['850px', '600px'],
                title: ['查看历史记录'],
                content:  serverPath.formPath + setter.formLinkPath + "formDefHi/view/list?formDefId="+formId
            });
        })


    })
</script>
</body>
</html>